<template>
  <item-box
    :data="data"
    :isMakeForm="type === 'MakeForm'"
    :prop="prop"
    :showMask="data.name !== 'Layout'"
    :style="{ padding: data.name === 'Layout' ? '0!important' : undefined }"
  >
    <xue-input
      v-if="data.name === 'Input'"
      :data="data"
      :model="model"
    ></xue-input>
    <xue-textarea
      v-else-if="data.name === 'Textarea'"
      :data="data"
      :model="model"
    ></xue-textarea>
    <xue-phone
      v-else-if="data.name === 'Phone'"
      :data="data"
      :model="model"
    ></xue-phone>
    <xue-password
      v-else-if="data.name === 'Password'"
      :data="data"
      :model="model"
    ></xue-password>
    <xue-button
        v-else-if="data.name === 'Button'"
        :data="data"
    ></xue-button>
    <xue-layout
      v-else-if="data.name === 'Layout'"
      :data="data"
      :type="type"
      :model="model"
    ></xue-layout>
  </item-box>
</template>

<script>
import AllComponents from './components.js'
import ItemBox from './common/ItemBox'
import XueButton from "@/components/componentList/button/index.vue";
export default {
  name: 'WhichComponents',
  components: {XueButton, ...AllComponents, ItemBox },
  props: {
    data: {
      type: Object,
      required: true,
    },
    // 父组件传入的type  来动态展示制作页还是显示页
    type: {
      type: String,
      default: 'MakeForm',
    },
    prop: String,
    model: Object,
  },
}
</script>
